<script setup lang="ts">
import {reactive, onMounted, ref} from "vue";
import {GameClass} from "./game.ts";

const gameRef = ref<HTMLElement>()

const gameData = reactive({
    isStart: false,
    score: 10,
    time: 0,
    formatTime: (time: number) => {
        const hour = Math.floor(time / 3600).toString().padStart(2, '0')
        const minute = Math.floor(time / 60).toString().padStart(2, '0')
        const second = Math.floor(time % 60).toString().padStart(2, '0')
        return `${hour}:${minute}:${second}`
    }
})

let game: null | GameClass = null

onMounted(() => {
    game = new GameClass(gameRef.value)
})


const handleGameStart = () => {
    gameData.isStart = !gameData.isStart
    if (gameData.isStart) {
        game.start()
    }
}

const handleGameRestart = () => {

}

</script>

<template>
    <div style="height: 50px; width: 100%; text-align: center; margin-bottom: 8px">
        <el-text tag="b" style="font-size: 35px">2 0 4 8</el-text>
    </div>
    <el-card style="height: calc(100% - 60px)" body-style="height: calc(100% - 40px)">
        <el-row :gutter="10" style="height: 100%">
            <el-col :span="19" style="justify-items: center;">
                <div style="height: 10%; width: 100%; display: flex; justify-content: space-around">
                    <el-text tag="b" style="font-size: 20px">得分：{{ gameData.score }}</el-text>
                    <el-text tag="b" style="font-size: 20px">时间：{{ gameData.formatTime(gameData.time) }}</el-text>
                </div>
                <div ref="gameRef" style="height: 525px; width: 525px;
                border-radius: 8px; margin-top: 40px; background-color: #BBADA0">
                    <div v-for="i in 4" style="width: 100%; display: flex; ">
                        <div class="cell" v-for="j in 4">
                            <span class="cell-number" :class="i.toString() + '-' + j.toString()" >

                            </span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="5" style="height: 100%">
                <!--                配置区-->
                <el-card style="height: 100%">
                    <el-button
                        style="width: 100%"
                        type="primary" size="large" @click="handleGameStart">
                        {{ gameData.isStart ? '暂停' : '开始' }}
                    </el-button>
                    <el-button
                        style="width: 100%; margin-top: 10px; margin-left: 0"
                        type="primary" size="large" @click="handleGameRestart">
                        重新开始
                    </el-button>
                    <el-text style="font-size: 25px; width: 100%; text-align: center; display: block">战绩</el-text>
                    <el-table
                        :data="[]"
                        style="width: 100%; height: calc(100% - 100px)"
                        border
                        stripe
                        highlight-current-row
                        :row-style="{color: '#212121'}"
                        :header-cell-style="{color: '#212121'}"
                    >
                        <el-table-column type="selection"/>
                        <el-table-column prop="datetime" label="日期"/>
                        <el-table-column prop="score" label="时间"/>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </el-card>
</template>

<style scoped lang="css">
.cell {
    width: 110px;
    height: 110px;
    background-color: #EEEADA59;
    margin-left: 15px;
    margin-top: 15px;
    border-radius: 10px;
    text-align: center;
    line-height: 110px;
}
.cell-number {
    width: 100%;
    height: 100%;
    font-size: 55px;
    border-radius: 10px;
    font-weight: bolder;
    font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
    animation: scaleIn 0.5s ease-out;
    display: inline-block;
}
@keyframes scaleIn {
    0% {
        transform: scale(0) translateY(50%);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(1)  translateY(0);
        opacity: 1;
    }
}

</style>